{% assign current = page.url | downcase | split: '/' %}

<nav>
  <ul class="usa-sidenav-list">
    <li>
      <a {% if page.url == '/' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/">Overview</a>
    </li>
    <li>
      <a {% if current[1] == 'typography' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/typography/">Typography</a>
      {% if current[1] == 'typography' %}
        <ul class="usa-sidenav-sub_list">
          <li>
            <a href="#typefaces">Typefaces</a>
          </li>
          <li>
            <a href="#pairings-and-styles">Pairings and styles</a>
          </li>
          <li>
            <a href="#typesetting">Typesetting</a>
          </li>
          <li>
            <a href="#links">Links</a>
          </li>
          <li>
            <a href="#lists">Lists</a>
          </li>
        </ul>
      {% endif %}
    </li>
    <li>
      <a {% if current[1] == 'colors' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/colors/">Colors</a>
      {% if current[1] == 'colors' %}
        <ul class="usa-sidenav-sub_list">
          <li>
            <a href="#palette">Palette</a>
          </li>
          <li>
            <a href="#text-accessibility">Text accessibility</a>
          </li>
        </ul>
      {% endif %}
    </li>
    <li>
      <a {% if current[1] == 'grids' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/grids/">Grid</a>
    </li>
    <li>
      <a {% if current[1] == 'buttons' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/buttons/">Buttons</a>
    </li>
    <li>
      <a {% if current[1] == 'labels' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/labels/">Labels</a>
    </li>
    <li>
      <a {% if current[1] == 'tables' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/tables/">Tables</a>
    </li>
    <li>
      <a {% if current[1] == 'alerts' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/alerts/">Alerts</a>
    </li>
    <li>
      <a {% if current[1] == 'accordions' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/accordions/">Accordions</a>
    </li>
    <li>
      <a {% if current[1] == 'form-controls' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/form-controls/">Form controls</a>
      {% if current[1] == 'form-controls' %}
        <ul class="usa-sidenav-sub_list">
          <li>
            <a href="#text-input">Text inputs and area</a>
          </li>
          <li>
            <a href="#dropdown">Dropdown</a>
          </li>
          <li>
            <a href="#checkboxes">Checkboxes</a>
          </li>
          <li>
            <a href="#radio-buttons">Radio buttons</a>
          </li>
          <li>
            <a href="#date-input">Date input</a>
          </li>
        </ul>
      {% endif %}
    </li>
    <li>
      <a {% if current[1] == 'form-templates' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/form-templates/">Form templates</a>
      {% if current[1] == 'form-templates' %}
      <ul class="usa-sidenav-sub_list">
        <li>
          <a href="#name-form">Name form</a>
        </li>
        <li>
          <a href="#address-form">Address form</a>
        </li>
        <li>
          <a href="#sign-in-form">Sign-in form</a>
        </li>
        <li>
          <a href="#password-reset-form">Password reset form</a>
        </li>
      </ul>
      {% endif %}
    </li>
    <li>
      <a {% if current[1] == 'search-bar' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/search-bar/">Search bar</a>
    </li>
    <li>
      <a {% if current[1] == 'sidenav' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/sidenav/">Side navigation</a>
    </li>
    <li>
      <a {% if current[1] == 'headers' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/headers/">Headers</a>
      {% if current[1] == 'headers' %}
        <ul class="usa-sidenav-sub_list">
          <li>
            <a href="#basic">Basic header</a>
          </li>
          <li>
            <a href="#basic-mega-menu">Basic header with mega menu</a>
          </li>
          <li>
            <a href="#extended">Extended header</a>
          </li>
          <li>
            <a href="#extended-mega-menu">Extended header with mega menu</a>
          </li>
        </ul>
      {% endif %}
    </li>
    <li>
      <a {% if current[1] == 'footers' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/footers/">Footers</a>
      {% if current[1] == 'footers' %}
        <ul class="usa-sidenav-sub_list">
          <li>
            <a href="#big-footer">Big footer</a>
          </li>
          <li>
            <a href="#medium-footer">Medium footer</a>
          </li>
          <li>
            <a href="#slim-footer">Slim footer</a>
          </li>
        </ul>
      {% endif %}
    </li>
  </ul>
</nav>
